<template>
    <div class="cart-view">
      <header>
        <router-link to="/" class="back-arrow">
          <van-icon name="arrow-left" />
        </router-link>
        <h1>购物车</h1>
      </header>
      <div v-if="!isLoggedIn" class="login-prompt">
        <span class="login-text">登录后享受更多优惠</span>
        <router-link class="login-link" to="/login">去登录 ›</router-link>
      </div>
      <div v-else>
        <p class="welcome-text" style="display: none;"></p>
      </div>
      <div class="empty-cart" v-if="!cartItems.length">
        <div class="cart-icon">🛒</div>
        <p class="empty-text">购物车还是空的</p>
        <router-link class="browse-button" to="/">随便看看</router-link>
      </div>
      <ul class="cart-list" v-else>
        <li v-for="(item, index) in cartItems" :key="item.id">
          <div class="product-card" :class="{ selected: item.selected }">
            <div class="store-info">
              <van-checkbox v-model="item.selected" @change="updateTotalPrice" class="select-checkbox" />
              <label class="store-name">小米自营店</label>
            </div>
            <div class="product-info">
              <div class="product-image">
                <img :src="item.image" :alt="item.name">
              </div>
              <div class="product-details">
                <h2 class="product-name">{{ item.name }}</h2>
                <div class="price-quantity">
                  <div class="price-info">
                    <span class="current-price">¥{{ item.price }}</span>
                  </div>
                  <div class="quantity-control">
                    <van-stepper v-model="item.quantity" min="1" @change="updateQuantity(item)" />
                  </div>
                </div>
              </div>
            </div>
            <div class="action-bar">
              <van-button size="small" @click="removeFromCart(index)">删除</van-button>
            </div>
          </div>
        </li>
      </ul>
  
      <section class="featured-products" v-if="featuredProducts.length">
        <h2 class="featured-title">精选好物</h2>
        <div class="product-grid">
          <div class="product-card" v-for="(product, index) in featuredProducts" :key="index">
            <img :src="product.image" :alt="product.name" class="product-image">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-price">{{ product.currentPrice }} <span class="product-original-price">{{
                product.originalPrice }}</span></p>
            <div class="product-tags">
              <span class="tag" v-for="tag in product.tags" :key="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </section>
  
      <div v-if="selectedItemsCount > 0" class="floating-price-bar">
        <div class="select-all">
          <van-checkbox v-model="allSelected" @change="selectAll">全选</van-checkbox>
        </div>
        <div class="total-price">
          总计: <span class="price">¥{{ totalPrice.toFixed(2) }}</span>
        </div>
        <van-button type="danger" size="large" @click="checkout">结算 ({{ selectedItemsCount }})</van-button>
      </div>
    </div>
  </template>
  
<script>
  import { Toast } from 'vant';
  
  export default {
    data() {
      return {
        isLoggedIn: false,
        cartItems: [],
        featuredProducts: [],
        totalPrice: 0,
        selectedItemsCount: 0,
        allSelected: false,
      }
    },
    created() {
      this.isLoggedIn = !!localStorage.getItem("AUTO_TOKEN")
      this.loadCartItems()
      this.loadFeaturedProducts()
    },
    methods: {
      loadCartItems() {
        const cart = JSON.parse(localStorage.getItem('SKY_CART_DATA') || '[]')
        this.cartItems = cart
        this.updateTotalPrice()
      },
      loadFeaturedProducts() {
        // Simulated featured products data
        this.featuredProducts = Array(4).fill().map(() => ({
          name: 'Redmi Note 13 Pro',
          currentPrice: '¥1399',
          originalPrice: '¥1499',
          image: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200030_9a6a9bf107f4b4a7a25e4ccedf0c1174.png?w=800&h=800',
          tags: ['6期免息', '加价购']
        }));
      },
      updateQuantity(item) {
        if (item.quantity < 1) item.quantity = 1
        this.saveCartItems()
        this.updateTotalPrice()
      },
      removeFromCart(index) {
        this.cartItems.splice(index, 1)
        this.saveCartItems()
        this.updateTotalPrice()
      },
      saveCartItems() {
        localStorage.setItem('SKY_CART_DATA', JSON.stringify(this.cartItems))
      },
      updateTotalPrice() {
        this.totalPrice = this.cartItems.reduce((total, item) => {
          return item.selected ? total + (item.price * item.quantity) : total
        }, 0)
        this.selectedItemsCount = this.cartItems.filter(item => item.selected).length
        this.allSelected = this.cartItems.length > 0 && this.cartItems.every(item => item.selected)
      },
      selectAll(isSelected) {
        this.cartItems.forEach(item => item.selected = isSelected)
        this.updateTotalPrice()
        this.saveCartItems()
      },
      checkout() {
        Toast('结算功能尚未实现')
      }
    },
  }
  </script>
  
  <style lang="less" scoped>
  .cart-view {
    padding-bottom: 50px;
  }
  
  header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
  
    .back-arrow {
      font-size: 24px;
      color: #333;
    }
  
    h1 {
      flex-grow: 1;
      text-align: center;
      font-size: 18px;
      margin: 0;
    }
  }
  
  .login-prompt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff5f5;
    color: #ff4d4f;
  
    .login-link {
      color: #ff4d4f;
      text-decoration: none;
    }
  }
  
  .empty-cart {
    text-align: center;
    padding: 40px 0;
  
    .cart-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }
  
    .empty-text {
      font-size: 16px;
      color: #999;
      margin-bottom: 16px;
    }
  
    .browse-button {
      display: inline-block;
      padding: 8px 24px;
      background-color: #ff4d4f;
      color: #fff;
      text-decoration: none;
      border-radius: 20px;
    }
  }
  
  .cart-list {
    list-style: none;
    padding: 0;
    margin: 0;
  
    .product-card {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 16px;
  
      &.selected {
        background-color: #fff1f0;
      }
  
      .store-info {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
  
        .store-name {
          margin-left: 8px;
        }
      }
  
      .product-info {
        display: flex;
  
        .product-image {
          width: 80px;
          height: 80px;
          margin-right: 16px;
  
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
  
        .product-details {
          flex: 1;
  
          .product-name {
            font-size: 16px;
            margin: 0 0 8px;
          }
  
          .price-quantity {
            display: flex;
            justify-content: space-between;
            align-items: center;
  
            .current-price {
              color: #ff4d4f;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
  
      .action-bar {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
  
  .featured-products {
    margin-top: 20px;
    padding: 16px;
    background-color: #fff;
  
    .featured-title {
      font-size: 18px;
      margin-bottom: 16px;
      text-align: center;
    }
  
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
  
      .product-card {
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 8px;
  
        .product-image {
          width: 100%;
          height: 120px;
          object-fit: cover;
          margin-bottom: 8px;
        }
  
        .product-name {
          font-size: 14px;
          margin: 0 0 4px;
        }
  
        .product-price {
          color: #ff4d4f;
          font-weight: bold;
          margin: 0 0 4px;
  
          .product-original-price {
            color: #999;
            text-decoration: line-through;
            margin-left: 4px;
          }
        }
  
        .product-tags {
          .tag {
            display: inline-block;
            padding: 2px 4px;
            background-color: #fff1f0;
            color: #ff4d4f;
            font-size: 12px;
            margin-right: 4px;
            border-radius: 2px;
          }
        }
      }
    }
  }
  
  .floating-price-bar {
    position: fixed;
    bottom: 46px;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  
    .select-all {
      flex: 1;
      font-size: 13px;
      margin-right: 10px;
    }
  
    .total-price {
      font-size: 16px;
      margin-right: 16px;
  
      .price {
        
        color: #ff4d4f;
        font-weight: bold;
      }
    }
  }
  </style>